<template>
  <div>
    <h1>{{ str }}</h1>
    <button @click="rev">逆转世界</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      str: "Hello,world"
    };
  },
  methods: {
    rev() {
      // 1. 将 str 转换成数组
      // 2. 翻转所有元素
      // 3. 赋值给 str 变量
      this.str = this.str.split('').reverse().join('')
      // 数据驱动视图: str 被修改了, 所以用到 str 的地方会自动更新
    }
  },
};
</script>

<style lang="scss" scoped>

</style>